﻿@page "/tables/fix-column"

<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>

<p>@((MarkupString)Localizer["P1"].Value)</p>

<DemoBlock Title="@Localizer["P2"]" Introduction="@Localizer["P3"]" Name="FixedColHeader">
    <p>@((MarkupString)Localizer["P4"].Value)</p>
    <Table TItem="Foo" Items="@Items.Take(4)" RenderMode="TableRenderMode.Table" HeaderStyle="TableHeaderStyle.Light" IsBordered="true" IsStriped="true" class="table-fixed-column-demo">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" Fixed="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Address" Width="900" Filterable="true" />
            <TableColumn @bind-Field="@context.Education" Width="100" Filterable="true" />
            <TableColumn @bind-Field="@context.Count" Width="100" Filterable="true" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" Filterable="true" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["P5"]" Introduction="@Localizer["P6"]" Name="FixedColTableHeader">
    <Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" HeaderStyle="TableHeaderStyle.Dark" IsBordered="true" IsStriped="true" IsMultipleSelect="true" Height="200" FixedMultipleColumn="true" class="table-fixed-column-demo2">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
            <TableColumn @bind-Field="@context.Education" Width="100" />
            <TableColumn @bind-Field="@context.Count" Width="100" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["P7"]" Introduction="@Localizer["P8"]" Name="FixedExtendButtonsColumn">
    <Table TItem="Foo" Items="@Items.Take(4)" IsBordered="true" IsStriped="true" RenderMode="TableRenderMode.Table"
           ShowExtendButtons="true" FixedExtendButtonsColumn="true"
           class="table-fixed-column-demo">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
            <TableColumn @bind-Field="@context.Education" Width="100" />
            <TableColumn @bind-Field="@context.Count" Width="100" />
            <TableColumn @bind-Field="@context.Complete" Width="100" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["P9"]" Introduction="@Localizer["P10"]" Name="FixedExtendButtonsColumn">
    <Table TItem="Foo" Items="@Items.Take(10)" IsBordered="true" IsStriped="true" IsMultipleSelect="true"
           IsFixedHeader="true" FixedExtendButtonsColumn="true" Height="200" FixedMultipleColumn="true"
           ShowExtendButtons="true" RenderMode="TableRenderMode.Table" class="table-fixed-column-demo2">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
            <TableColumn @bind-Field="@context.Education" Width="100" />
            <TableColumn @bind-Field="@context.Count" Width="100" />
            <TableColumn @bind-Field="@context.Complete" Width="100" />
        </TableColumns>
    </Table>

    <Table TItem="Foo" Items="@Items.Take(10)" IsBordered="true" IsStriped="true" IsMultipleSelect="true"
           IsFixedHeader="true" FixedExtendButtonsColumn="true" IsExtendButtonsInRowHeader="true" FixedMultipleColumn="true"
           ShowExtendButtons="true" RenderMode="TableRenderMode.Table" Height="200" class="table-fixed-column-demo mt-3">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
            <TableColumn @bind-Field="@context.Education" Width="100" />
            <TableColumn @bind-Field="@context.Count" Width="100" />
            <TableColumn @bind-Field="@context.Complete" Width="100" />
        </TableColumns>
    </Table>
</DemoBlock>
